<template>
  <!-- 详细参照elementui官网：https://element.eleme.io/#/zh-CN/component/form#form-item-methods -->
  <!-- 表单属性解释  1.model：表单数据对象  2.rules：表单验证规则 3.ref：表单名称  4.label-width：标签宽度-->
  <!-- 表单绑定数据  1.formData在script中声明，标识表单提交数据，书组件传参过来   2.formconfig：formconfig.labeWidth标签宽度、formconfig.rules表单规则、formconfig.itemList表单绑定字段-->
<!--  size	输入框尺寸，只在 type!="textarea" 时有效	string	medium / small / mini-->
  <el-form :model="formData" :rules="formconfig.rules" ref="ruleForm" :label-width="formconfig.labeWidth+'px'">
    <el-form-item v-for="(item,index) of formconfig.itemList" :key="index" :label="item.label" :prop="item.prop"
                  :class="item.type">
      <el-input v-if="item.type =='input'" v-model="formData[item.prop]"   :disabled="item.disabled"
                :placeholder="item.placeholder" :size="item.size" :maxlength="item.maxlength" :show-word-limit="item.maxlength?true:false"></el-input>
      <el-select v-if="item.type =='select'" v-model="formData[item.prop]" :placeholder="item.placeholder"
                 :multiple="item.isMultiple" :collapse-tags="item.isCollapseTags" filterable clearable :size="item.size">
        <el-option v-for="(item,index) of item.option" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-cascader v-if="item.type === 'cascader'" v-model="formData[item.prop]" @change="handleChange"
          :options="item.option" :size="item.size"
          :props="{ label: 'orgName', value: 'orgCode', children: 'children', checkStrictly: true }" :show-all-levels="item.showAllLevels"
          filterable
          clearable

      ></el-cascader>
      <el-cascader v-if="item.type === 'cascaderCategory'" v-model="formData[item.prop]"
                   :options="item.option" :size="item.size"
                   :props="{ label: 'label', value: 'id', children: 'children' }" :show-all-levels="item.showAllLevels"
                   filterable
                   clearable
      ></el-cascader>
      <el-date-picker v-if="item.type =='datapicker'" type="date" :placeholder="item.placeholder"
                      v-model="formData[item.prop]" :style="{width: item.width}" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-date-picker v-if="item.type =='daterange'" type="daterange" :placeholder="item.placeholder" :size="item.size"
                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      v-model="formData[item.prop]" :default-time="['00:00:00', '23:59:59']" :style="{width: item.width}" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-time-picker v-if="item.type =='timepicker'" :placeholder="item.placeholder" v-model="formData[item.prop]"
                      :style="{width: item.width}"></el-time-picker>
      <el-switch v-if="item.type =='switch'" v-model="formData[item.prop]"></el-switch>
      <el-checkbox-group v-if="item.type =='checkbox'" v-model="formData[item.prop]">
        <el-checkbox v-for="(item) of item.checkboxs" :key="item.label" :label="item.value">{{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <el-radio-group v-if="item.type =='radio'" v-model="formData[item.prop]">
        <el-radio v-for="(item) of item.radios" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
      <el-input v-if="item.type =='textarea'" type="textarea" v-model="formData[item.prop]"></el-input>
    </el-form-item>
    <el-form-item>
      <el-row>
        <el-button v-for="(item,index) of formconfig.btnarry" :key="index" @click="submitForm('ruleForm',item)"
                   :size="item.size" :type="item.type" :disabled="item.disabled" :plain="item.plain"
        >{{ item.name }}
        </el-button>
      </el-row>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'formFiled',
  // 父组件传参
  props: { formconfig: Object, formData: Object },
  watch: {
    formconfig (val) {
      // console.log("formconfig", val)
      this.$forceUpdate()
    },
    formData (val) {
      // console.log("formData", val)
      this.$forceUpdate()
    }
  },
  methods: {
    // 表单规则验证
    submitForm (formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 按钮事件为清空表单内容时触发
          if (type && type.click == 'clrear') {
            this.resetForm('ruleForm')
          }
          // 不为空把表单值传入父组件
          this.$emit('formDataval', this.formData, true)
        } else {
          console.log('error submit!!')
          this.$emit('formDataval', this.formData, false)
          return false
        }
      })
    },
    handleChange (value) {
      this.$emit('cascaderValue', value)
    },
    // 清空表单事件
    resetForm (formName) {
      console.log('清空表单事件 - resetFields')
      // this.$refs[formName].resetFields()
      this.$router.go(0)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-select{
  border-left: 1px solid #d8dce5; border-right: 1px solid #d8dce5;border-radius: 5px;
  input[type="text"], input[type="number"]{border-radius: 0; border-left: none; border-right: none;}
}
</style>
